<template>
  <el-card shadow="hover" style="height: 100%;" :body-style="{height:'100%'}">
    <template #header>
      <nav class="flex justify-between">
        <span>汉字加拼音</span>
        <el-link type="primary" target="_blank" href="https://www.npmjs.com/package/pinyin-pro">npm地址</el-link>
      </nav>
    </template>


    <div class="pinyin">
      <template  v-for="(item) in compData.items1">
        <div class="pinyin-item" :key="idx" v-for="(todo,idx) in item">
          <span class="py">{{todo.py}}</span>
          <span class="hz">{{todo.hz}}</span>
        </div><br/>
      </template>
    </div>
  </el-card>
</template>
<script lang="ts">
import {defineComponent, reactive} from "vue"
import { pinyin } from "pinyin-pro"
export default defineComponent({
  setup(){
    const text1 = ["  山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？"]
    const createHzPy = (text)=>{
      const items = []
      text.forEach((item)=>{
        const todo = []
        for (let i = 0; i < item.length; i++) {
          const tg = item.charAt(i)
          todo.push({hz:tg,py:pinyin(tg)})
        }
        items.push(todo)
      })
      return items
    }
    const compData = reactive({
      items1:createHzPy(text1),
    })
    return {
      compData
    }
  }
})
</script>
<style lang="less" scoped>
.pinyin{
  &-item{
    line-height: 100%;
    width: 42px;
    text-align: center;
    display: inline-block;
    .py{
      clear: both;
      font-size: 12px;
      font-weight: normal;
      float: left;
      width: 42px;
    }
    .hz{
      clear: both;
      margin-bottom: 10px;
      text-align: center;
      float: left;
      font-size: 16px;
      height: 36px;
      width: 42px;
      line-height: 36px;
    }
  }
}
</style>
